
import { Row, Col, Form, Input, Button, Select, message, Table, Tag, Avatar, Popconfirm } from "antd"
import { useEffect, useRef, useState } from "react"
import { $http } from "../../api";
import { observer } from "mobx-react"
import { mbdata } from "../../mobx/data"
import { roleList } from "../../utils";
import { baseURL } from "../../api/request";
import {
  UserOutlined,
  DeleteOutlined
} from '@ant-design/icons';

const { Search } = Input
const { Option } = Select
function UserList() {
  const { userList, userInfo } = mbdata
  const select = useRef()

  useEffect(() => {
    $http.getuserlist()
      .then(res => {
        if (res.code == 200) {
          mbdata.changeUserList(res.result)
        }
      })
  }, [])
  // 表头
  const columns = [
    {
      title: "#",
      align: "center",
      render: (value, item, index) => {
        return (index + 1)
      }
    },
    {
      title: "用户名",
      align: "center",
      key: "account",
      dataIndex: "account",
      render: (value, item, index) => {
        return (
          <Tag color="#f50">
            {item.account}
          </Tag>
        )
      }
    },
    {
      title: "手机号码",
      align: "center",
      key: "phone",
      dataIndex: "phone"
    },
    {
      title: "身份",
      align: "center",
      key: "role",
      dataIndex: "role",
      render: (value, item, index) => {
        return (
          <Tag color={roleList.find(v => v.value == item.role).color}>
            {roleList.find(v => v.value == item.role).text}
          </Tag>
        )
      }
    },
    {
      title: "头像",
      align: "center",
      render: (value, item, index) => {
        return (
          item.avatar ? <Avatar shape="circle" src={item.avatar.replace(/public/, baseURL)} />
            :
            <Avatar shape="circle" icon={<UserOutlined />} />
        )
      }
    },
    {
      title: "操作",
      align: "center",
      render: (value, item, index) => {
        return (
          <Popconfirm
            title={'你真的要删除吗?'}
            onConfirm={() => deleteOne(item)}
            okText="确认"
            cancelText="取消"
            disabled={!(userInfo.role > 1 && item.role < 1)}
          >
            <Button disabled={!(userInfo.role > 1 && item.role < 1)} type="danger" shape="circle" icon={<DeleteOutlined />} size={38} ></Button>


          </Popconfirm>
        )
      }
    },
  ]

  const deleteOne = item => {
    $http.deluserone({
      _id: item._id
    })
      .then(res => {
        if (res.code == 200) {
          var list = userList.filter(v => v._id != item._id)
          mbdata.changeUserList(list)
        }
      })
  }

  const [value, setValue] = useState('')
  const startSearch = (value) => {
    console.log(value)
    $http.getuserlist({
      keyword: value
    })
      .then(res => {
        if (res.code == 200) {
          mbdata.changeUserList(res.result)
        }
      })
  }

  function todoSearch() {

    $http.getuserlist({
      role: value
    })
      .then(res => {
        if (res.code == 200) {
          mbdata.changeUserList(res.result)
        }
      })
  }


  const getSelectValue = v => {
    setValue(v)
  }
  return (
    <div>
      <h2>用户列表</h2>
      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={10} style={{ display: 'flex' }}>
          <Search placeholder="请输入搜索关键字" enterButton onSearch={startSearch} />
        </Col>
        <Col className="" type="primary" offset={2} span={8} style={{ display: 'flex' }} >
          {/* 搜索筛选 */}
          <Select placeholder="请选择" style={{ width: 120 }} ref={select} onChange={getSelectValue}>
            {
              roleList.map((l, i) => (
                <Option key={i} value={l.value} >
                  {l.text}
                </Option>
              ))
            }
          </Select>
          <Button type="primary" size="mini" onClick={todoSearch}>点击搜索</Button>
        </Col>
      </Row >

      <Row className="" style={{ marginTop: 20 }}>
        <Col className="" span={20}>
          <Table
            dataSource={userList}
            columns={columns}
            sticky
            bordered
            id="table"
            rowKey={item => item._id}
            pagination={{ pageSize: 6 }}
          >

          </Table>

        </Col>
      </Row >
    </div>
  )
}

export default observer(UserList)